<template>
	<div class="container">
		<div class="header pos-r bg-w">
			<div class="header-video w100">
				<van-image width="100%" :src="goods.activityImage" v-if="goods.activityImage"/>
			</div>
			<div class="header-tit">
				{{goods.activityName}}
			</div>
		</div>
		<div class="wrapper">
			<div class="item-cell">
				<div class="item-cell-tit flex align-items">
					<van-icon name="clock-o" class="inline mr5" />时间 <span>{{goods.startDate}}-{{goods.endDate}}</span>
				</div>
			</div>
			<div class="item-cell">
				<div class="item-cell-bd" v-html="goods.activityDesc">
				</div>
			</div>
			<div class="item-cell">
				<div class="item-cell-tit flex align-items">
					<van-icon name="photo-o" class="inline mr5" />上传活动图片
				</div>
				<div class="item-cell-bd mt20">
					<van-uploader v-model="fileList" :max-count="9" use-before-read :before-read="beforeRead" :after-read="afterRead" result-type="file" :max-size="10485760"  @oversize="oversizeFun"/>
				</div>
			</div>
			<div class="up-btn">
				<van-button type="primary" size="large" color="linear-gradient(90deg,rgba(255,93,106,1) 0%,rgba(255,140,86,1) 100%)"
				 @click="setShortSaveFun">提交</van-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getImageToken,
		getActivityInfo,
		setActivity
	} from '@/api/permission.js'
	import {
		Toast,
		Notify
	} from 'vant';
	import uploadFun from '@/assets/js/qiniu'
	import config from '@/config/baseUrl'
	export default {
		data() {
			return {
				goods: {
					activityImage:''
				},
				fileList: [],
				posing:false,
				uploadImg:false
			}
		},
		components: {
			[Toast.name]: Toast,
			[Notify.name]:Notify
		},
		mounted() {
			let self = this
			if (self.$route.query.id) {
				getActivityInfo({
					id: self.$route.query.id
				}).then(res => {
					self.goods = res
				})
			}
			getImageToken().then(res => {
				self.$store.commit('SET_IMAGETOKEN', res.token)
			})
		},
		methods: {
			afterRead(file, detail) {
				// 此时可以自行将文件上传至服务器
				this.uploadImg = true
				this.uploadFiles(file, detail)
			},
			oversizeFun(){
				Toast('请上传活动图片小于10M')
			},
			uploadFiles(file, detail) {
				let self = this
				let observer = {
					next(res) {
						
					},
					error(err) {
						self.uploadImg = false
						console.log(err)
					},
					complete(res) {
						self.uploadImg = false
						if (res.key) {
							self.fileList.push({ ...file,
								url: `${config.qiuNiuDomain}/${res.key}`
							})
							self.fileList.splice(detail.index, 1)
						}
					}
				}
				// self.dialogVisible = true
				self.subscription = uploadFun(self.$store.state.imageToken, file.file, observer)
			},
			beforeRead(file) {
				if(this.uploadImg){
				   Toast('有图片正在上传,请稍后尝试');
				   return false;
				}
				if (file.type.indexOf('image')<=-1) {
					Toast('请上传图片格式JPG/PNG');
					return false;
				}
				return true;
			},
			setShortSaveFun() {
				let self = this
				let imageList = []
				if(self.posing){
					return Toast('正在提交,请勿重复提交')
				}
				if(self.uploadImg){
				   Toast('有图片正在上传,请稍后尝试');
				   return false;
				}
				if (self.fileList.length) {
					self.fileList.forEach((item, index) => {
						imageList.push({
							imageUrl:item.url
						})	
					})
				} else {
					Toast('请上传活动图片')
					return false
				}
				let data = {
					activityId: self.goods.id,
					detailId: self.goods.detail.idNumber,
					imageList:imageList
				}
				setActivity(data).then(res => {
					self.posing = false
					Notify({ type: 'success', message: '提交成功',onClose:()=>{
						self.$router.go(-1)
					}});
				}).catch(err=>{
					self.posing = false
				})
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.container {
		background-color: #F3F3F3;
	}

	.header {
		border: 1px solid #ebedf0;

		&-video {
			width: 100%;
			height: 205px;
			overflow: hidden;
		}

		&-tit {
			padding: 10.5px 16px;
			line-height: 25px;
			font-size: 18px;
			font-weight: 500
		}
	}

	.info-wrap-head {
		position: relative;
		overflow-x: hidden;
		font-size: 18px;
		line-height: 25px;
		font-weight: bold;
		padding-left: 14px;
		margin-bottom: 12.5px;

		&:before {
			content: '';
			width: 0;
			height: 17px;
			border-left: 3px solid #FF5E6AFF;
			position: absolute;
			left: 0;
			top: 4px;
			z-index: 88;
		}
	}

	.info-wrap {
		padding: 15px 16px;
		color: #666666FF;
		font-size: 16px;
	}

	.info-wrap-info {
		overflow-x: hidden;

		img {
			width: 100%;
		}
	}

	.wrapper {
		margin-top: 10px;
		padding: 3px 8px;
		background-color: #FFFFFF;
	}

	.item-cell {
		font-size: 15px;
		font-weight: 500;
		color: #999999;
		line-height: 22px;
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #DDDDDD;

		&:last-child {
			border-bottom: none;
		}
	}

	.item-cell-tit {
		span {
			margin-left: 10px;
			color: #333333;
		}
	}

	.mr5 {
		margin-right: 5px;
	}

	.mt20 {
		margin-top: 20px;
	}

	.upload {}
</style>
